var canvas = document.createElement('canvas');
var page_c = document.getElementById('myCanvas');
canvas.width = page_c.width;
canvas.height = page_c.height;
var bbox;
var ctx = canvas.getContext('2d');
var context = page_c.getContext('2d');
var begin = document.getElementById('begin');
begin.src = "effects/begin.m4v";
begin.load();
var dur = document.getElementById('dur');
dur.src = "effects/dur.m4v";
dur.load();
dur.loop = "loop";
var end = document.getElementById('end');
end.src = "effects/end.m4v";
end.load();
var anim;
var animend;
var bg = new Image();
bg.src = "img/bg.jpg";
var pack = new Image();
pack.src = "img/pack.png";
var proc = 0;
var loaded = 0;
function fload() {
	setTimeout(function(){
		proc += 5;
		xh();
	},100);
}
pack.onload = fload();
bg.onload = fload();
var loadanim = window.setInterval(function(){
	if(proc < 10 + 30 * loaded){
		proc += 1;
		xh();
	}
},1000);
begin.onload = loadvid("begin");
dur.onload = loadvid("dur");
end.onload = loadvid("end");
function loadvid(video){
	loaded += 1;
	var url = "./effects/" + video + ".m4v";
	const req = new XMLHttpRequest();
　　req.open('GET', url, true);
　　req.responseType = 'blob';
　　req.onload = function() {
	　　if (this.status === 200) {
		　　const videoBlob = this.response;
		　　const vid = URL.createObjectURL(videoBlob); // IE10+
		　　video.src = vid;
			proc = 10 + 30 * loaded;
			xh();
	　　}
　　}
　　req.send();
}

function add(proc){
    var tbox =$(".tbox");
    var tiao =$(".tiao");
	tiao.css("width",proc+"%").html(proc+"%");
}
function xh(){
	if(proc >= 100){
		document.getElementById("tbox").style.display = "none";
		$(".ok").html("加载完成").fadeIn("slow");
		setTimeout(function(){
			draw();
		},500);
		window.setInterval(function(){
			context.drawImage(canvas, 0, 0);
		},33);
		window.clearInterval(loadanim);
	}
	if(proc < 100){
		add(proc);
	}
}
$(document).ready(function(){	
		xh();
});
function draw() {
	listrefresh(-1);
	document.getElementById("box").style.display = "none";
	ctx.drawImage(bg, 0, 0);
	ctx.drawImage(pack, 179, 235, 160, 200);
	start();
}
function start(){
	page_c.onmousedown = function(e){
		bbox = page_c.getBoundingClientRect();
		x = (e.clientX - bbox.left) * (page_c.width / bbox.width);
        y = (e.clientY - bbox.top) * (page_c.height / bbox.height);
		if(x >= 175 && x <= 350 && y >= 230 && y <= 440){
			window.clearInterval(animend);
			begin.play();
			dur.play();
			anim = window.setInterval(function() {
				
				ctx.drawImage(bg, 0, 0);
				ctx.drawImage(begin, 406, 8, 736, 627);
				if(begin.ended){
					ctx.drawImage(dur, 406, 8, 736, 627);
				}
				ctx.drawImage(pack, x - 80, y - 100, 160, 200);
			}, 20);
			page_c.onmousemove = function(e){
				x = (e.clientX - bbox.left) * (page_c.width / bbox.width);
		        y = (e.clientY - bbox.top) * (page_c.height / bbox.height);
    			ctx.drawImage(pack, x - 80, y - 100, 160, 200);
				page_c.onmouseup = function(e){
					x = (e.clientX - bbox.left) * (page_c.width / bbox.width);
		        	y = (e.clientY - bbox.top) * (page_c.height / bbox.height);
					anim = window.clearInterval(anim);
					page_c.onmousemove = null;
					page_c.onmouseup = null;
					if(x >= 450 && x <= 850 && y >= 250 && y <= 550){
						page_c.onmousedown = null;
						end.play();
						animend = window.setInterval(function(){
							ctx.drawImage(bg, 0, 0);
							ctx.drawImage(end, 406, 8, 736, 627);
							ctx.drawImage(pack, 658, 243, 160, 200);
							if(end.ended){
								window.clearInterval(animend);
							}
						}, 20);
						listrefresh(returnCitySN["cip"]);
					}
					else{
						end.play();
						animend = window.setInterval(function(){
							ctx.drawImage(bg, 0, 0);
							ctx.drawImage(end, 406, 8, 736, 627);
							ctx.drawImage(pack, 179, 235, 160, 200);
							if(end.ended){
								window.clearInterval(animend);
							}
						}, 20);
					}
				}
			}
		}
	}
	document.ontouchstart = function(e){
		bbox = page_c.getBoundingClientRect();
		var touch = e.touches[0];
		x = (touch.clientX - bbox.left) * (page_c.width / bbox.width);
		y = (touch.clientY - bbox.top) * (page_c.height / bbox.height);
		if(x >= 175 && x <= 350 && y >= 230 && y <= 440){
			e.preventDefault();
			begin.play();
			anim = window.setInterval(function() {
				window.clearInterval(animend);
				dur.play();
				ctx.drawImage(bg, 0, 0);
				ctx.drawImage(begin, 406, 8, 736, 627);
				if(begin.ended){
					ctx.drawImage(dur, 406, 8, 736, 627);
				}
				ctx.drawImage(pack, x - 80, y - 100, 160, 200);
			}, 20);
			page_c.ontouchmove = function(e){
				var touch = e.touches[0];
				x = (touch.clientX - bbox.left) * (page_c.width / bbox.width);
				y = (touch.clientY - bbox.top) * (page_c.height / bbox.height);
    			ctx.drawImage(pack, x - 80, y - 100, 160, 200);
				page_c.ontouchend = function(e){
					anim = window.clearInterval(anim);
					page_c.ontouchmove = null;
					page_c.ontouchend = null;
					if(x >= 450 && x <= 850 && y >= 250 && y <= 550){
						page_c.ontouchstart = null;
						end.play();
						animend = window.setInterval(function(){
							ctx.drawImage(bg, 0, 0);
							ctx.drawImage(end, 406, 8, 736, 627);
							ctx.drawImage(pack, 658, 243, 160, 200);
							if(end.ended){
								window.clearInterval(animend);
							}
						}, 20);
						listrefresh(returnCitySN["cip"]);
					}
					else{
						end.play();
						animend = window.setInterval(function(){
							ctx.drawImage(bg, 0, 0);
							ctx.drawImage(end, 406, 8, 736, 627);
							ctx.drawImage(pack, 179, 235, 160, 200);
							if(end.ended){
								window.clearInterval(animend);
							}
						}, 20);
					}
				}
			}
		}
	}
}
function display(){
	setTimeout(function(){
		var prize = new Array("再接再厉","一等奖","二等奖","三等奖");
	    if(result === "0"){
	        alert("您的IP: " + returnCitySN["cip"] + "\n很遗憾，这次您未抽中奖");
	    }
	    else{
	        alert("您的IP: " + returnCitySN["cip"] + "\n恭喜您抽中" + prize[result]);
	    }
	    window.clearInterval(animend);
	    draw();
	},900);
}